Как изменить дизайн гаджета постоянные читатели

Доброго времени суток, всем кто читает мои шпаргалки. Сегодня хочу предложить вам тему, как с помощью CSS можно изменить гаджет постоянные читатели. Как-то давненько я увидела эту информацию на блоге http://www.magentawave.com и она меня зацепила. Но, как бывает сразу всё не напишешь. И вот пришло время поделиться ей с вами.
Эта такая дизайнерская разработка автора этого сайта, которая заслуживает внимания. Я очень не люблю, когда боковые колонки блога заполнены всякой нужной и не нужной всячиной. Особенно на главной странице. Для тех, кто разделяет моё мнение, что места там постоянно не хватает, такой вариант гаджета, очень кстати. Итак, как сделать гаджет постоянные читатели в виде спойлера, используя CSS.

Прошу вас посмотреть у меня в сайдбаре , как он сейчас выглядит. Настроить его можно по своему желанию. Подобрать цветовую гамму, высоту. Что-то добавить или убрать. Мой код, который я привела ниже, немного отличается от первоисточника. Он рабочий , а все настройки разберём ниже. К тому же, он не несёт особой нагрузки на блог.

Копируем к себе в черновик этот код

#Followers1 {
  background: #F0F0FF; 
  overflow: hidden;
  border: 1px solid #C04D00 ;
  border-radius: 5px;
  box-shadow: none; /

  -webkit-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  -moz-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  -o-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  height: 80px;
  width: auto;
}

#Followers1:hover {
  background: #FAF5FF;
  border: 1px solid #A08BED;

  -webkit-box-shadow: 0 1em 1em .3em rgba(0,0,6,0.5); /*Chrome*/
  -moz-box-shadow: 0 1em 1em .3em rgba(0,0,6,0.5); /*FF*/
  box-shadow: 0 1em 1em .3em rgba(0,0,6,0.5);
 height: 300px;
}
#Followers1 > h2 {
 display: none; 
}

#Followers1-wrapper {
  box-shadow: none;
  -webkit-transition: box-shadow 1s ease;
  -moz-transition: box-shadow 1s ease;
  -o-transition: box-shadow 1s ease;
  transition: box-shadow 1s ease;
}
#Followers1-wrapper:hover {
  -webkit-box-shadow: inset 0 0 1em .3em #c9f;
  -moz-box-shadow: inset 0 0 1em .3em #c9f;
  box-shadow: inset 0 0 1em .3em #c9f;
  height: 300px;
}

Давайте сейчас разберёмся в настройках. Тут, конечно, можно много чего поменять, но остановимся, на мой взгляд, на основных. Они выделены синим цветом. Рассмотрим сверху вниз по порядку.

background: #F0F0FF; -цвет основного фона
#C04D00 -цвет рамки
height: 80px;-это высота гаджета в состоянии покоя
height: 300px;-эта высота всего гаджета. Её нужно будет редактировать на свой вкус. В двух местах.
Обратите внимание на 2 строки в коде #Followers1 > h2 {
 display: none; этот участок отвечает за название гаджета. Если оставить в таком виде, то он будет без названия. У себя я его убрала. И, как видите, название осталось. Ну вот вроде и все настройки.

Когда код готов, заходим в шаблон-изменить HTML. Находим строку ]]></b:skin>и прямо над ней вставляем его. Сохраняем.

Хочу обратить внимание ещё на один момент. Так как, шаблоны могут быть разные нужно проверить вот такой идентификатор гаджета постоянные читатели- #Followers1. У вас он может быть несколько другой #Followers2 или 3. В этом случае эти цифры нужно поменять на свои. И давайте посмотрим, как это узнать.

Зайдите во вкладку дизайн. Видим гаджет постоянные читатели( может у вас другое название) и нажимаем изменить. Дальше подведите курсор к самому верху где указан адрес. Нажмите левую кнопку мыши и тяните бегунок  вправо. В самом конце будет искомый Followers.
Посмотрите на скриншот ниже.

В результате, мы получаем новый дизайн гаджета постоянные читатели. И добавим места в боковой колонке. Посоветую также прочитать статью как закрыть ссылку гаджета постоянные читатели.

На сегодня у меня всё. Тёплых вам осенних денёчков. Увидимся.

оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :